import react, { useMemo } from 'react'
import { Collapse, Button, Popover, Typography, } from 'antd';
import { CaretRightOutlined } from '@ant-design/icons';
import { TextWidget } from '@inbiz/react';
import CustomMultiple from './CustomMultiple';
import CategoryListRender from '../CategoryListRender';
import CustomValue from '../CategoryListRender/CustomValue'
import CategoryLeftItem from './CategoryLeftItem'
import type { ISearchData } from '../../../../designer/service';
import type { ICategorySelect, IConfigItem } from '../content';
import './index.less'
type ICategoryLeft = IConfigItem & {
  list: ISearchData['SectionList'];
  selected: string[];
  onSelected: ICategorySelect;
  wholeref: any;
};

const { Panel } = Collapse;
const { Text } = Typography;

//ShowHierarchy 1 二级和三级  2  一级和二级  3 一级二级和三级
function CategoryLeft({ list, config, selected, onSelected, wholeref }: ICategoryLeft) {
  // const { defaultActiveKey, showList } = usePanelList({ list })
  /* 因为Value是唯一的, 所以用Value作为collapse的key
  * 无论显示一级和二级还是一级二级三级, 只需要第一级的Value
  * 如果显示二级和三级, 则需要将二级的Key提出来, 因为二级的Value
  * 
  */
  const defaultActiveKey = useMemo(() => {
    return list.map(item => {
      if (item.ShowHierarchy == 1 && item.IsGroup) {
        return item.SectionGroupData.map(ele => ele.Value)
      }
      return item.Value
    }).flat()
  }, [list])

  return list?.length ? (
    <Collapse
      bordered={false}
      expandIconPosition="end"
      defaultActiveKey={defaultActiveKey}
      className="categoryLeft"
      //@ts-ignore
      style={{
        '--category-item-width': (config.sectionWidth || config.leftSectionWidth) + 'px',
        width: (config.sectionWidth || config.leftSectionWidth) + 'px',
      }}
      expandIcon={({ isActive }) => <CaretRightOutlined className={isActive ? 'top' : 'right'} />}
    >
      {list.map((item, index) => {
        if (item.ShowHierarchy == 1 && item.IsGroup) {
          return item.SectionGroupData.map((ele, i)=> {
            return customPanel({
              item: ele,
              selected,
              onSelected,
              index,
              config,
              key: ele.Value,
              IsGroup: item.IsGroup,
              wholeref,
              parentItem: item,
              ShowHierarchy: item.ShowHierarchy,
              showCustomValue: item.SectionGroupData.length - 1 == i
            })
          })
        }
        return customPanel({
          item,
          selected,
          onSelected,
          index,
          config,
          key: item.Value,
          IsGroup: item.IsGroup,
          wholeref,
          parentItem: item,
          ShowHierarchy: item.ShowHierarchy,
          showCustomValue: item.IsCustomSearch
        });
      })}
    </Collapse>
  ) : null;
}

function customPanel(props) {
  const {
    item,
    selected,
    onSelected,
    index,
    config,
    key,
    parentItem,
    IsGroup,
    wholeref,
    ShowHierarchy,
    showCustomValue
  } = props;

  const isSelectAll = () => {
    const allKey = item.Key + ':';
    return !selected.find((ele) => ele.indexOf(allKey) === 0);
  };
  const handleAllClick = (e) => {
    if (!isSelectAll()) {
      const allKey = item.Key + ':';
      onSelected(
        selected.filter((select) => select.indexOf(allKey) === 0),
        false,
        index,
        item.IsWhether,
      );
    }
  };

  return (
    <Panel
      key={key}
      className={`${item.IsWhether ? 'multipleHeader' : 'radioHeader'} `}
      header={
        <Text style={{ width: (config.sectionWidth || config.leftSectionWidth) - 40 }} ellipsis title={`${item.Value}`}>
          {`${item.Value} : `}
        </Text>
      }
    >
      <Popover
        // visible
        transitionName=""
        maskTransitionName=""
        mouseEnterDelay={0.05}
        mouseLeaveDelay={0.05}
        getPopupContainer={() => wholeref.current}
        placement="bottom"
        overlayClassName="categoryOverLay"
        content={
          <CategoryLeftItem
            item={item}
            parentItem={parentItem}
            selected={selected}
            onSelected={onSelected}
            index={index}
            config={config}
          />
        }
      >

        <div className={`categoryItemBox ${isSelectAll() ? 'selected' : ''} whole`}>
          <div>
            <Button
              type="text"
              className="all"
              size="small"
              shape="round"
              onClick={handleAllClick}
            >
              <div>
                <TextWidget>SearchResultEngine.whole</TextWidget>
              </div>
            </Button>
          </div>
          {/* <div>
            <RightCircleOutlined />
          </div> */}
        </div>
      </Popover>
      {ShowHierarchy == 3 && IsGroup ? (
        <>
          <CustomMultiple
            groupList={item.SectionGroupData}
            selected={selected}
            onSelected={onSelected}
            parentItem={parentItem}
            level={index}
            config={config}
            wholeref={wholeref}
          />
          {parentItem.IsCustomSearch && <div className='leftCustomValueComtainer'>
            <CustomValue item={parentItem} onSelected={onSelected} index={index} />
          </div>}
        </>
      ) : (
        <>
          <CategoryListRender
            item={item}
            parentItem={parentItem}
            number={5}
            selected={selected}
            onSelected={onSelected}
            level={index}
            IsWhether={parentItem?.IsWhether}
            config={config}
            showCustomValue={false}
          />
          {parentItem.IsCustomSearch&& showCustomValue && <div className='leftCustomValueComtainer'>
            <CustomValue item={parentItem} onSelected={onSelected} index={index} />
          </div>}
        </>
      )}

    </Panel>
  );
}

export default CategoryLeft;
